<template>
	<view class="start-index">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<home ref="home" :params="params" @change-share="handleChangeShare"></home>
			</scroll-view>
		</view>
		<!-- <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <circle-page ref="circleRef"></circle-page>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <activity ref="activity"></activity>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <preferred ref="preferredRef"></preferred>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <mine ref="mine"></mine>
      </scroll-view>
    </view> -->

		<!-- <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#838383"
      inactiveColor="#AAAAAA"
      activeIconColor="#FBBD12"
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
    ></tn-tabbar> -->
	</view>
</template>

<script>
	import Home from './home/home.vue'

	// var app = getApp()

	export default {
		components: {
			Home
		},
		data() {
			return {
				musicState: true,
				// 底部tabbar菜单数据
				share: {
					title: '自定义分享',
					path: '/home/index',
					imageUrl: '../../static/day_icon.png'
				},
				params: null,
				tabbarList: [{
						title: '首页',
						activeIcon: '/static/tabbar/home_tnnew.png',
						inactiveIcon: '/static/tabbar/home_tn.png'
					},
					{
						title: '圈子',
						activeIcon: '/static/tabbar/circle_tnnew.png',
						inactiveIcon: '/static/tabbar/circle_tn.png'
					},
					{
						title: '广场',
						activeIcon: 'menu-circle',
						inactiveIcon: 'rocket',
						activeIconColor: '#FFFFFF',
						inactiveIconColor: '#FFFFFF',
						iconSize: 50,
						out: true
					},
					{
						title: '优选',
						activeIcon: '/static/tabbar/preferred_tnnew.png',
						inactiveIcon: '/static/tabbar/preferred_tn.png',
					},
					{
						title: '我的',
						activeIcon: '/static/tabbar/mine_tnnew.png',
						inactiveIcon: '/static/tabbar/mine_tn.png'
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: []
			}
		},
		onShareAppMessage(res) {
			console.log("分享///////")
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return this.share
		},
		onShareTimeline(res) {
			console.log("分享xxxx")
			return this.share
		},
		onLoad(options) {
			console.log("options ", options)
			if (options.scene) {
				const scene = decodeURIComponent(options.scene)
				this.params = {};
				for (var i = 0; i < scene.split('&').length; i++) {
					var arr = scene.split('&')[i].split('=');
					this.params[arr[0]] = arr[1];
				}
				console.log("scene ", this.params)
			} else {
				// console.log("options " )
				this.params = options
			}
			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.$music.playBgm({
				mute: false
			})
			this.switchTabbar(index)
			// ceshi
			// this.params.mid = 1
		},
		methods: {
			handleChangeShare(data) {
				console.log(data)
				this.share = data
			},
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
				if (index !== 2) {
					this.$refs?.circleRef?.stopAllVideo()
				}
			},


			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {
				if (this.currentIndex === 3) {
					this.$refs.preferredRef.getRandomData && this.$refs.preferredRef.getRandomData()
				}
			},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.start-index {
		background-color: #FDF1F0;
	}
</style>